<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="loginUser">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
    <router-link to="/register">没有账号? 注册</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; 
const username = ref('');
const password = ref('');
const router = useRouter();

// 登录用户
const loginUser = () => {
  const storedUserInfo = JSON.parse(localStorage.getItem('userInfo'));

  if (storedUserInfo && storedUserInfo.username === username.value && storedUserInfo.password === password.value) {
    console.log('登录成功');
    router.push('/home')
    // 登录成功后可以重定向到其他页面
  }else if (username.value === 'admin' && password.value === 'admin') {
    console.log('登录成功，进入 admin 页面');
    router.push('/admin'); // 重定向到 admin 页面
  } else if (username.value === 'user' && password.value === '123456') {
    console.log('登录成功，进入 home 页面');
    router.push('/home'); 
  }
  else {
    console.error('用户名或密码错误');
  }
};
</script>

<style scoped>
.login-container h2{
  text-align: center;
}
.login-container {
  position: relative;
  top: 200px;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-container input {
  display: block;
  width: 80%;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-container button {

  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 0 5px;
}

.login-container button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  text-align: center;
  margin-top: 10px;
}
</style>
